<template>
  <div class="fanlist">
    <div class="userHeader"><img :src="fans.avatar"></div>
    <div class="userName">{{fans.name}}</div>
    <div class="userTxt">
      <p>总销售金额<span>{{fans.salesAmount}}</span></p>
      <p>为我带来美豆<span>{{fans.integral}}</span></p>   
    </div>
  </div>
</template>
<script>
export default {
  props:{
    fans:{
      type: Object,
    },
  },
  data(){
      return{
        show:1 
      }
  },
  methods:{  
  }
}
</script>
<style scoped>
.fanlist{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 134rpx;
  padding: 0 30rpx;
  border-top: 1px solid #DFDFDF;
}
.userHeader{
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
}
.userHeader>img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.userName{
  font-size: 28rpx;
  color: #000;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin: 0 20rpx;
}
.userTxt{
  font-size: 28rpx;
  color: #ABABAB;
}
.userTxt .span{
  font-size: 28rpx;
  color: #E38A8A;
}
</style>
